<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box {
      height: 300px;
      width: 300px;
      background: #1892e0;
      transition: all .3s;
    }

    .box:hover {
      /*复合属性会多次触发动画结束事件*/
      border-radius: 50%;
    }
  </style>
</head>
<body>
<div class="box"></div>
<script>


  const box = document.querySelector('.box');


  // once只会触发一次，后续再有动画也不会触发
  // box.addEventListener('transitionend', () => {
  //   console.log('动画结束')
  // }, {
  //   once: true
  // })

  // 防抖处理
  function debounce(fn, timeout = 0) {
    let id;
    return () => {
      if (id) {
        clearTimeout(id);
      }
      id = setTimeout(fn, timeout);
    }
  }

  const fn = debounce(() => {
    console.log('动画结束')
  }, 0)

  box.addEventListener("transitionend", () => {
    fn();
  })



</script>
</body>
</html>